<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>订单统计图表</title>
    <style>
        #orderChart {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div id="orderChart"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        // 初始化图表
        const chartDom = document.querySelector('#orderChart');
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '月度订单统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '订单数量',
                type: 'bar',
                data: [],
                smooth: true
            }]
        };

        // 改为自己的管理员 token
        const token = 'xxxx';

        // 建立 SSE 连接
        const evtSource = new EventSource(`http://localhost:9480/admin/charts/order?token=${token}`);
        evtSource.onmessage = function (event) {
            const data = JSON.parse(event.data);
            option.xAxis.data = data.months;
            option.series[0].data = data.values;
            myChart.setOption(option);
        };
    </script>
</body>

</html>